<template>
    <div>

        <!-- 添加修改弹出层开始 -->
        <el-dialog :title="title" :visible.sync="formDialogVisible" width="800px" center append-to-body>

            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <!-- 头像 -->
                <el-form-item label="头像" prop="picture" label-width="90px" align="center">
                    <el-upload  ref="upload"
                                action="#"
                                :multiple="true"
                                :on-change="fileChange"
                                :on-remove="fileRemove"
                                :auto-upload="false"
                                :on-success="handleAvatarSuccess"
                                :limit="1"
                                list-type="picture"  style="border-radius: 50%;margin-left: -70px;border: 1px dashed #d9d9d9;width:100px;height:100px">
                        <img v-if="form.picture" :src="form.picture" width="100px" height="100px" style="border-radius: 50%;margin: 0">
                        <i v-else class="el-icon-plus" style="margin-top: 40px"></i>
                    </el-upload>
                    <div style="margin-left: 200px;" >
                        <el-button type="primary" size="mini" v-if="pictureSubmit" @click="show">提交</el-button>
                    </div>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="userName">
                            <el-input v-model="form.userName" style="width:240px" placeholder="请输入用户名称" clearable size="small" />
                        </el-form-item></el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="form.phone" @blur="checkmulPhone" :disabled="disabled" style="width:240px" placeholder="请输入手机号，作为登陆凭证" clearable size="small" />
                            <span ref="checknulPhone" ></span>
                        </el-form-item></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属科室" prop="deptId">
                            <el-select
                                    v-model="form.deptId"
                                    placeholder="所属科室"
                                    clearable
                                    size="small"
                                    style="width:240px"
                            >
                                <el-option
                                        v-for="d in deptOptions"
                                        :key="d.deptId"
                                        :label="d.deptName"
                                        :value="d.deptId"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="级别" prop="userRank">
                            <el-select
                                    v-model="form.userRank"
                                    placeholder="用户级别"
                                    clearable
                                    size="small"
                                    style="width:240px"
                            >
                                <el-option
                                        v-for="d in levelOptions"
                                        :key="d.dictValue"
                                        :label="d.dictLabel"
                                        :value="d.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="年龄" prop="age">
                            <el-input-number v-model="form.age" clearable size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="背景" prop="background">
                            <el-select
                                    v-model="form.background"
                                    placeholder="学历"
                                    clearable
                                    size="small"
                                    style="width:240px"
                            >
                                <el-option
                                        v-for="d in backgroundOptions"
                                        :key="d.dictValue"
                                        :label="d.dictLabel"
                                        :value="d.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="form.sex">
                                <el-radio
                                        v-for="d in sexOptions"
                                        :key="d.dictValue"
                                        :label="d.dictValue"
                                        :value="d.dictValue"
                                >{{ d.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="form.status">
                                <el-radio
                                        v-for="dict in statusOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                        :value="dict.dictValue"
                                >{{ dict.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="是否参与排班" prop="schedulingFlag">
                            <el-radio-group v-model="form.schedulingFlag">
                                <el-radio
                                        v-for="d in schedulingOptions"
                                        :key="d.dictValue"
                                        :label="d.dictValue"
                                        :value="d.dictValue"
                                >{{ d.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="form.email" style="width:240px" placeholder="请输入用户邮箱" clearable size="small" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="22">
                        <el-form-item label="密码" prop="password" v-if="passWord">
                            <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="确认密码" prop="confirmPassword" v-if="passWord">
                            <el-input type="password" v-model="form.confirmPassword" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="擅长" prop="strong" >
                            <el-input v-model="form.strong" type="textarea" placeholder="请输入用户擅长" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="荣誉" prop="honor">
                            <el-input v-model="form.honor" type="textarea" placeholder="请输入用户相关荣誉" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="简介" prop="introduction">
                            <el-input v-model="form.introduction" type="textarea" placeholder="请输入用户简介" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
        </el-dialog>
        <!-- 添加修改弹出层结束 -->

        <!-- 查询条件开始 -->
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
            <el-form-item label="所属部门" prop="deptId">
                <el-select v-model="queryParams.deptId" placeholder="请选择部门" clearable size="small" style="width:140px">
                    <el-option v-for="dict in deptOptions" :key="dict.deptId" :label="dict.deptName"
                               :value="dict.deptId" />
                </el-select>
            </el-form-item>
            <el-form-item label="用户姓名" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入用户姓名" clearable size="small" style="width:140px" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="queryParams.phone"  placeholder="请输入手机号" clearable size="small" style="width:140px" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="可用状态" clearable size="small" style="width:140px">
                    <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
                               :value="dict.dictValue" />
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker v-model="queryParams.dateRange" size="small" style="width:210px"
                                value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholde="开始日期"
                                end-placeholde="结束日期" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" circle  @click="queryTable"></el-button>
                <el-button type="warning" icon="el-icon-refresh" circle  @click="refreshUser"></el-button>
            </el-form-item>
        </el-form>

        <!-- 表格工具按钮开始 -->
        <el-row :gutter="10" style="margin-bottom: 8px;">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addUser">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="mulDelUser">批量删除</el-button>
            </el-col>
        </el-row>
        <!-- 表格工具按钮结束 -->


        <!-- 数据表格开始 -->
        <el-table  border :data="userList" style="width: 100%" fit  :ref="multipleTableUser" @selection-change="handleSelectionChangeUser">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="邮箱:">
                            <span style="width: 200px">{{ props.row.email }}</span>
                        </el-form-item>
                        <el-form-item label="擅长:">
                            <span>{{ props.row.strong }}</span>
                        </el-form-item>
                        <el-form-item label="荣耀:">
                            <span>{{ props.row.honor }}</span>
                        </el-form-item>
                        <el-form-item label="简介:">
                            <span>{{ props.row.introduction }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="用户ID" align="center" prop="userId" sortable width="100"/>
            <el-table-column label="用户姓名" align="center" prop="userName"  />
            <el-table-column label="部门" align="center" prop="deptId" :formatter="deptFormat"/>
            <el-table-column label="手机号码【登陆身份】" width="180" align="center" prop="phone" />
            <el-table-column label="性别" align="center" prop="sex" :formatter="sexFormat"/>
            <el-table-column label="年龄" align="center" prop="age"  sortable/>
            <el-table-column label="是否排班" align="center" prop="schedulingFlag" :formatter="schedulingFormat"/>
            <el-table-column label="级别" prop="userRank" align="center" :formatter="levelFormat"/>
            <el-table-column label="背景" prop="background" align="center" :formatter="backgroundFormat"/>
            <el-table-column label="状态" prop="status" align="center" :formatter="statusFormat"/>
            <el-table-column label="创建时间" align="center" prop="createTime" width="170" sortable/>
            <el-table-column label="操作" align="center" width="250">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.userId!=1" type="text" icon="el-icon-edit" size="mini" @click="updUser(scope.row)">修改</el-button>
                    <el-button v-if="scope.row.userId!=1"  type="text" icon="el-icon-delete" size="mini" @click="delUser(scope.row)">删除</el-button>
                    <el-button v-if="scope.row.userId!=1" type="text" icon="el-icon-thumb" size="mini" @click="assignRole(scope.row)">分配角色</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 数据表格结束 -->

        <!-- 分页控件开始 -->
        <el-pagination
                v-show="page.total>0"
                :current-page="page.current"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <!-- 分页控件结束 -->

        <!--分配权限的对话框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="40%">
                <el-table
                        ref="roleListTable"
                        border
                        :data="roleTableList"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="角色ID" align="center" prop="roleId" />
                    <el-table-column label="角色名称" align="center" prop="roleName" />
                    <el-table-column label="权限编码" align="center" prop="roleCode" />
                    <el-table-column label="备注" align="center" prop="remark" />
                    <el-table-column label="创建时间" align="center" prop="createTime" />
                </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmRole">确 定</el-button>
                </span>
        </el-dialog>

    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: "User",
        data(){
            //验证手机号是否正确
            var phoneVerify = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("手机号不可为空"));
                } else {
                    if (value !== "") {
                        var reg = /^1[3-9]\d{9}$/;
                        if (!reg.test(value)) {
                            callback(new Error("请输入有效的手机号码"));
                        }
                    }
                    callback();
                }
            };
            //验证邮箱是否正确
            var checkEmail = (rule, value, cb) => {
                //验证邮箱的正则表达式
                const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if (regEmail.test(value)) {
                    //合法的邮箱
                    return cb();
                }
                cb(new Error("请输入合法的邮箱"));
            };
            /* password密码验证条件 */
            var checkPassword = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入密码'));
                }else if (value === this.form.oldPassword){
                    return callback(new Error('新密码和原密码一致'));
                }  else {
                    callback();
                }
            };
            /* confirmPassword确认密码验证条件 */
            var checkConfirmPassword = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                //密码框的显示控值
                passWord:false,
                //头像提交按钮显示的控值
                pictureSubmit:false,
                //表单中手机号的禁用的控值
                disabled:false,
                //要批量删除的每一个数据
                multipleTableUser:[],
                // 非多个禁用
                multiple: true,
                //添加/修改表单绑定的对象
                form:{
                    age:23,
                    sex:'0',
                    status:'0',
                    schedulingFlag:'Y',
                },
                /* 存放头像 */
                fileList: [],
                //添加修改表单对话框的控值
                formDialogVisible:false,
                //添加修改表单的标题
                title:'',
                //分配角色对话框的控制
                dialogVisible:false,
                //所有角色数据
                roleTableList:[],
                //当前角色拥有的角色数据
                userRoles:[],
                //存储当前用户修改后的角色数据
                multipleSelection:[],
                //要分配角色的用户id
                userId:0,
                //模糊查询的条件
                queryParams:{},
                //所有的部门信息
                deptOptions:[],
                //系统状态
                statusOptions:[],
                //背景字典
                backgroundOptions:[],
                //级别字典
                levelOptions:[],
                //性别字典
                sexOptions:[],
                //排班字典
                schedulingOptions:[],
                //所有员工的信息
                userList:[],
                page:{
                    total:0,
                    current:1,
                    size:5,
                },
                //添加修改表单的验证规则
                rules:{
                    userName: [
                        { required: true, message: '用户名称不能为空', trigger: 'blur' }
                    ],
                    phone: [
                        {required: true, validator: phoneVerify, trigger: 'blur' }
                    ],
                    email: [
                        {required: true, validator: checkEmail, trigger: 'blur' }
                    ],
                    deptId: [
                        {required: true, message: '请选择所属科室', trigger: 'change'}
                    ],
                    userRank: [
                        {required: true, message: '请选择级别', trigger: 'change'}
                    ],
                    age: [
                        {required: true, message: '请填写年龄', trigger: 'change'}
                    ],
                    background: [
                        {required: true, message: '请选择学历背景', trigger: 'change'}
                    ],
                    password: [
                        { required: true, validator: checkPassword, trigger: 'blur' },
                        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                    ],
                    confirmPassword: [
                        { required: true,validator: checkConfirmPassword, trigger: 'blur' },
                        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                    ],
                },
            }

        },
        created() {
            this.initDept();       //加载部门条件模糊查询
            this.initStatus();     //加载状态条件模糊查询
            this.initBackground(); //背景字典
            this.initScheduling(); //排班计划
            this.initSex();        //性别
            this.initLevel();      //医生级别
            this.initUser();       //加载表格中用户条件信息
        },
        methods:{
            /* 头像 */
            //获取图片列表：上传头像时候触发
            fileChange(file, fileList) {
                this.fileList = fileList;
                //console.log("获取多个图片", this.fileList)
                this.pictureSubmit=true;
            },
            //触发删除列表
            fileRemove(file, fileList) {
                this.fileList = fileList;
                //console.log(this.fileList)
            },
            //上传成功后处理方法
            handleAvatarSuccess(res, file) {
                //URL对象可以通过createObjectURL(any)方法来将任意内容用一个地址来表示
                this.imageUrl = URL.createObjectURL(file.raw);


            },
            //上传头像
            show() {
                let formData = new FormData;
                if (this.fileList.length == 0) {
                    this.$message.error("还没有上传图片")
                    return;
                }
                this.fileList.forEach((File) => {
                    //将图片数据追加到formData中
                    formData.append("file", File.raw)
                })
                axios({  //使用axios发出请求发出请求上传请求
                    method: "post",
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    url: "http://localhost:8886/system/api/user/uploadFile",
                    data: formData
                }).then(res => {
                    if (res.data.msg == "上传头像成功") {
                        this.pictureSubmit=false;
                        this.$message.success(res.data.msg)
                        this.form.picture = res.data.data;
                        this.$refs.upload.clearFiles();
                        // console.log(this.form.picture)
                    } else {
                        this.$message.error("上传头像失败")
                    }
                })
            },
            /* 表格外部按钮触发事件 */
            queryTable(){  //模糊查询按钮触发
                this.page.current = 1;
                this.initUser();
            },
            refreshUser(){ //清空模糊查询的条件
                this.queryParams={};
                this.page.current=1;
                this.initUser();
            },
            addUser(){  //添加按钮触发添加用户操作
                //清除上次表单提交后的提示
                if (this.$refs.form != undefined) {
                    this.$refs.upload.clearFiles();
                    this.$refs.form.resetFields();
                }
                this.formDialogVisible=true;
                this.title='添加用户';
                //显示密码框
                this.passWord=true;
                //解除手机号禁用
                this.disabled=false;
                this.form={
                        age:23,
                        sex:'0',
                        status:'0',
                        schedulingFlag:'Y',
                };
            },
            handleSelectionChangeUser(val){  //将用户表格中的要删除的数据信息保存到容器中
                this.multipleTableUser = val;
                //没有行被选中的时候，将批量删除按钮禁用
                this.multiple = !val.length
            },
            mulDelUser(){  //批量删除
                this.$confirm('此操作将永久删除以下被选中用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let userIds = [];
                    for (let i=0;i<this.multipleTableUser.length;i++){
                        userIds.push(this.multipleTableUser[i].userId)
                    }
                    this.$http.post("/system/api/user/muldelUser/"+userIds).then(result=>{
                        if (result.data.data){
                            this.$message({
                                showClose: true,
                                message: result.data.msg,
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                showClose: true,
                                message: '操作失败',
                                type: 'error'
                            });
                        }
                        this.initUser();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            /*  表单事件  */
            checkmulPhone(){  //手机号填写失焦时，会检查手机号是否重复
                let checkphone = this.form.phone;
                this.$http.post("/system/api/user/checkPhone/"+checkphone).then(result=>{
                    if (result.data.msg==null || result.data.msg==""){
                    }else{
                        this.$message.error(result.data.msg);
                    }

                })
            },
            submitForm(){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$http.post("/system/api/user/saveOrUpdateUser",this.form).then(result=>{
                            if (result.data.data){
                                this.$message({
                                    showClose: true,
                                    message: result.data.msg,
                                    type: 'success'
                                });
                            }else {
                                this.$message({
                                    showClose: true,
                                    message: '操作失败',
                                    type: 'error'
                                });
                            }
                            //关闭对话框
                            this.formDialogVisible = false;
                            //刷新表单
                            // this.form = {};
                            this.$refs['form'].resetFields();
                            //重置标题
                            this.title='';
                            //刷新表格
                            this.initUser();
                        })
                    }
                })
            },
            cancel(){  //添加/修改表单取消按钮触发
                this.formDialogVisible = false;
                this.title = '';
            },

            /*表格内部点击事件*/
            updUser(row){  //表格中修改按钮触发，修改用户信息
                this.disabled=true;
                if (this.$refs.form != undefined) {
                    this.$refs.upload.clearFiles();
                    this.$refs.form.resetFields();
                    // this.$refs['form'].resetFields();
                }
                this.title='修改用户信息';
                //隐藏密码框
                this.passWord=false;
                //显示弹出对话框
                this.formDialogVisible = true;
                //将当前行的用户id传入表单
                this.form.userId = row.userId;
                //采取深克隆的形式
                this.form = JSON.parse(JSON.stringify(row));
            },
            delUser(row){
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/system/api/user/delUser/"+row.userId).then(result=>{
                        if (result.data.data){
                            this.$message({
                                showClose: true,
                                message: result.data.msg,
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                showClose: true,
                                message: result.data.msg,
                                type: 'error'
                            });
                        }
                        this.page.current=1;
                        this.initUser();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            confirmRole(){  //确认分配角色
                let roleIds = [];
                this.multipleSelection.forEach(item=>{
                    roleIds.push(item.roleId);
                })
                this.$http.post("/system/api/role/confirmRole?userId="+this.userId+"&roleIds="+roleIds).then(result=>{
                    this.dialogVisible=false;
                    this.$message.success("分配角色成功")
                })
            },
            //这里在获取全部角色和当前用户的角色信息时需要同步操作
            async assignRole(row){  //分配角色
                this.userId=row.userId;  //这里的操作是将当前用户的id赋值给这个变量，为了确认角色时传递到后台
                //打开对话框
                this.dialogVisible=true;
                //查询所有角色
                //当前用户所具有的角色
                await this.$http.get("system/api/role/getByUserId/"+row.userId).then(result=>{
                    this.roleTableList = result.data.data.roles;
                    this.userRoles = result.data.data.userRoles;
                });
                //创建一个空数组来存放默认数据
                let list = [];
                //遍历表格的数据，再遍历需要在表格中反显的数据，两者的id一致,因为当前全部角色的数据和当前用户的角色数据是不一样引用地址
                this.roleTableList.forEach((item)=>{
                    this.userRoles.forEach(val=>{
                        if (val.roleId===item.roleId){
                            //把当前用户拥有的表格数据push到创建的数组中
                            list.push(item);
                        }
                    })
                })
                console.log(list)
                //再次遍历数组，将数组放入到方法中
                list.forEach((row)=>{
                    this.$refs.roleListTable.toggleRowSelection(row, true)
                })

            },
            handleSelectionChange(v){  //将当前角色行放入其中
                this.multipleSelection=v;

            },

            /*初始化数据*/
            initDept(){ //查询模糊条件中的部门信息
                this.$http.get("/system/api/dept/list").then(result=>{
                    this.deptOptions = result.data.data;
                })
            },
            initStatus(){ //初始化状态字典
                this.$http.get("/system/api/dict/data/findByType/sys_normal_disable").then(result=>{
                    this.statusOptions = result.data.data;
                })
            },
            initBackground(){ //初始化背景字典
                this.$http.get("/system/api/dict/data/findByType/sys_user_background").then(result=>{
                    this.backgroundOptions = result.data.data;
                })
            },
            initSex(){ //初始化性别字典
                this.$http.get("/system/api/dict/data/findByType/sys_user_sex").then(result=>{
                    this.sexOptions = result.data.data;
                })
            },
            initLevel(){ //初始化级别字典
                this.$http.get("/system/api/dict/data/findByType/sys_user_level").then(result=>{
                    this.levelOptions = result.data.data;
                })
            },
            initScheduling(){ //初始化排班字典
                this.$http.get("/system/api/dict/data/findByType/sys_yes_no").then(result=>{
                    this.schedulingOptions = result.data.data;
                    // console.log(JSON.stringify(result.data.data))
                })
            },
            initUser(){  //初始化表格中用户信息
                this.$http.post("/system/api/user/selectAll/"+this.page.current+"/"+this.page.size,this.queryParams).then(result=>{
                    this.userList = result.data.data.records;
                    this.page.total = result.data.data.total;
                })
            },
            backgroundFormat(row){  //背景字典解析
                let v = row.background;
                return this.formatDict2(this.backgroundOptions,v);
            },
            schedulingFormat(row){  //排班字典解析
                let v = row.schedulingFlag;
                return this.formatDict2(this.schedulingOptions,v);
            },
            sexFormat(row){  //性别字典解析
                let v = row.sex;
                return this.formatDict2(this.sexOptions,v);
            },
            statusFormat(row){  //状态字典解析
                let v = row.status;
                return this.formatDict2(this.statusOptions,v);
            },
            levelFormat(row){  //医生级别字典解析
                let v = row.userRank;
                return this.formatDict2(this.levelOptions,v);
            },
            deptFormat(row){  //部门的解析，因为不在字典中，所以单独写即可
                let v = row.deptId;
                for (let i=0;i<this.deptOptions.length;i++){
                    if (this.deptOptions[i].deptId==v){
                        return this.deptOptions[i].deptName;
                    }
                }
                return "";
             },

            // 分页pageSize变化时触发
            handleSizeChange(val) {
                this.page.size = val
                // 重新查询
                this.initUser()
            },
            // 点击上一页  下一页，跳转到哪一页面时触发
            handleCurrentChange(val) {
                this.page.current = val
                // 重新查询
                this.initUser()
            },
        }

    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    /*给扩展表格的格式长度进行定义*/
    .demo-table-expand  .el-form-item{
        margin-right: 0;
        margin-bottom: 0;
        width: 100%;
    }
</style>
